<template>
  <YsCarousel class="carousel-box" autoplay :autoplay-speed="5000" v-model="value" loop>
    <YsCarouselItem v-for="(item,index) in uploadList" :key="index">
      <div class="demo-carousel">
        <img :src="item.url" />
        <h2 :class="item.class">{{item.text}}</h2>
        <YsButton @click="goPath" type="primary" class="carousel-btn">了解详情</YsButton>
      </div>
    </YsCarouselItem>
  </YsCarousel>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      value: 0,
      uploadList: [
        { class: "title01", url: require("../../assets/images/home_banner1.png"), text: " “应用生态化”，灯塔引领打造智能无损检测产业“新生态”", btn_flag: true },
        { class: "title02", url: require("../../assets/images/home_banner2.png"), text: "“检测规范化”，基于AI模型快速定位并准确识别问题", btn_flag: true },
        { class: "title03", url: require("../../assets/images/home_banner3.png"), text: "技术创新，平台赋能的“4化”能力", btn_flag: true },
        { class: "title04", url: require("../../assets/images/home_banner4.png"), text: "技术变革，高质量发展，突破瓶颈全面提升核心竞争力", btn_flag: true },
      ]
    }
  },
  methods: {
    goPath() {
      window.location.href = 'http://www.yuanshan-ai.com/index.html'
    }
  },
  mounted() {

  },
  watch: {

  },
  computed: {

  },
  filters: {

  }
}
</script>

<style scoped lang='less'>
.carousel-box {
  /deep/.right {
    display: none;
  }
  /deep/.left {
    display: none;
  }
  .demo-carousel {
    position: relative;
    width: 100%;

    height: 800px;
    img {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 8;
    }
    h2 {
      position: absolute;
      z-index: 1111;
      width: 754px;
      height: 162px;
      font-size: 53px;
      font-family: PingFangSC-Semibold;
      line-height: 88px;
      color: #ffffff;
      z-index: 10;
      left: 50%;
      top: 50%;
    }
    .title01 {
      width: 754px;
      margin: -170px 0 0 -350px;
    }
    .title02 {
      width: 700px;
      margin: -170px 0px 0px -370px;
      text-align: center;
    }
    .title03 {
      width: 830px;
      margin: -170px 0 0 -418px;
    }
    .title04 {
      width: 754px;
      margin: -150px 0 0 -118px;
      text-align: right;
    }
    .carousel-btn {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 190px;
      height: 60px;
      z-index: 100;
      margin: 70px 0 0 -100px;
      font-size: 22px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      background: linear-gradient(314deg, #0073d5 0%, #469be3 100%);
      opacity: 1;
      border: none;
    }
  }
}
/deep/.ivu-carousel-active {
  button {
    background: #fff !important;
    width: 40px !important;
  }
}
/deep/.ivu-carousel-dots {
  bottom: 16px;
  li {
    button {
      background: #fff !important;
      opacity: 0.4;
      width: 40px;
    }
  }
}

@media screen and (max-width: 1366px) {
  .title04 {
    width: 654px !important;
    margin: -150px 0 0 -280px !important;
    text-align: right;
  }
   .carousel-btn {
     margin-top: 100px  !important;
   }

}
</style>